<template>
  <div class="node-panel">
    <div
      v-for="(item, key) in state.nodePanel"
      :key="key"
      class="approve-node"
      @mousedown="dragNode(item)"
    >
      <div class="node-shape" :class="'node-' + item.type" />
      <div class="node-label">{{ item.text }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ILogicFlowNodePanelItem } from "@/types/logic-flow";
import LogicFlow from "@logicflow/core";
import { reactive } from "vue";
const props = defineProps<{ lf?: LogicFlow }>();
const state = reactive({
  nodePanel: [
    {
      type: "indicator",
      text: "指标",
    },
    {
      type: "indicatorConfig_operate",
      text: "新指标配置",
    },
    {
      type: "indicator_output",
      text: "指标输出",
    },
    {
      type: "add_operate",
      text: "+",
    },
    {
      type: "cut_operate",
      text: "-",
    },
    {
      type: "multiply_operate",
      text: "*",
    },
    {
      type: "except_operate",
      text: "/",
    },
    {
      type: "greaterThan_operate",
      text: ">",
    },
    {
      type: "greaterThanOrEqual_operate",
      text: ">=",
    },
    {
      type: "lessThan_operate",
      text: "<",
    },
    {
      type: "lessThanOrEqual_operate",
      text: "<=",
    },
  ],
});
const dragNode = (item: ILogicFlowNodePanelItem) => {
  props.lf?.dnd.startDrag({
    type: item.type,
    text: item.text,
  });
};
</script>
<style lang="scss" scoped>
.node-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 101;
  padding: 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 0 10px 1px #e4e0db;

  .approve-node {
    position: relative;
    padding: 10px 0;
    cursor: pointer;
    user-select: none;

    .node-label {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 12px;
      transform: translate(-50%, -50%);
    }
  }

  .node-shape {
    box-sizing: border-box;

    &.node-indicator {
      width: 120px;
      height: 50px;
      background-color: #82dff9;
      border: 2px solid #82dff9;
      border-radius: 4px;
    }

    &.node-indicator_output {
      width: 120px;
      height: 50px;
      background-color: #eb965d;
      border: 2px solid #eb965d;
      border-radius: 4px;
    }

    &.node-indicatorConfig_operate {
      width: 120px;
      height: 50px;
      background-color: #b0fa91;
      border: 2px solid #b0fa91;
      border-radius: 4px;
    }

    &.node-add_operate {
      width: 120px;
      height: 20px;
      background-color: #facd91;
      border: 2px solid #facd91;
      border-radius: 4px;
    }

    &.node-cut_operate {
      width: 120px;
      height: 20px;
      background-color: #81d3f8;
      border: 2px solid #81d3f8;
      border-radius: 4px;
    }

    &.node-multiply_operate {
      width: 120px;
      height: 20px;
      background-color: #facd91;
      border: 2px solid #facd91;
      border-radius: 4px;
    }

    &.node-except_operate {
      width: 120px;
      height: 20px;
      background-color: #caf982;
      border: 2px solid #caf982;
      border-radius: 4px;
    }

    &.node-greaterThan_operate {
      width: 120px;
      height: 20px;
      background-color: #81d3f8;
      border: 2px solid #81d3f8;
      border-radius: 4px;
    }

    &.node-greaterThanOrEqual_operate {
      width: 120px;
      height: 20px;
      background-color: #8199f8;
      border: 2px solid #8199f8;
      border-radius: 4px;
    }

    &.node-lessThan_operate {
      width: 120px;
      height: 20px;
      background-color: #81f8c5;
      border: 2px solid #81f8c5;
      border-radius: 4px;
    }

    &.node-lessThanOrEqual_operate {
      width: 120px;
      height: 20px;
      background-color: #c381f8;
      border: 2px solid #c381f8;
      border-radius: 4px;
    }
  }
}
</style>
